<template>
	<view class="publish-details" v-if="publisherLoad">
		<!--标题栏-->
		<view class="fixed">
			<bar-title bgColor="bg-shadeTop text-white"
				:isBack="true"
				:isSolid="false"
			>
				<block slot="backText"></block>
			</bar-title>
		</view>
		<view class="publish-bg">
			<image class="bg-img" :src="curretPublisher.tlssimg" mode="aspectFill"></image>
		</view>
		
		<view class="publish-info">
			
			<view class="publish-logo">
				<image class="logo" :src="curretPublisher.tlssimg" mode="aspectFill"></image>
			</view>
			<!-- <button class="cu-btn attention">+ 关注</button> -->
			<view class="publish-title">{{curretPublisher.lssuername}}</view>
			
			<view class="intro-box" v-if="brief.strIsCut(curretPublisher.introduction)">
				<view class="open" @click="openIntro" v-if="openIntroStatus">展开</view>
				<view class="title">简介</view>
				<view class="intro">
					{{brief.stringCut(curretPublisher.introduction, openIntroStatus)}}
					<text class="close" @click="closeIntro" v-if="!openIntroStatus">收起</text>
				</view>
			</view>
			<view class="intro-box" v-else>
				<view class="title">简介</view>
				<view class="intro">
					{{curretPublisher.introduction}}
				</view>
			</view>
		</view>
		
		<view class="publish-list">
			<view class="title">发行剧本</view>
			<view class="publish-scen">
				<block v-for="(info,index) in scenList" :key="index">
					<ViewScen :scen-info="info"></ViewScen>
				</block>
				
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
		</view>
		
	</view>
</template>

<script module="brief" lang="wxs">
    function strIsCut(str) {
    	var cutStatus = !!(str.length > 60 )
        return cutStatus
    }
	function stringCut(str, status) {
		if(status) {
			str = str.substring(0, 60) + '......'
		}
        return str
    }
    module.exports = {
		strIsCut: strIsCut,
		stringCut: stringCut
    }
</script>

<script>
import { mapState } from "vuex";
import ViewScen from '@/components/box/ViewScen.vue';
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import { Publisher } from '@/models/publisher.js';
export default {
	components: {
		ViewScen,
		uniLoadMore
	},
	data() {
		return {
			publisherLoad: false,
			lssuerid: '20200111162712123',
			openIntroStatus: true,
			pagenum: 1,
			loadingType: 'more',
			scenList: [],
		}
	},
	computed: {
		...mapState(['curretPublisher']),
	},
	onLoad(option) {
		if (option && option.lssuerid) {
			this.lssuerid = option.lssuerid
			console.log(this.curretPublisher);
			if(this.lssuerid == this.curretPublisher.lssuerid) {
				this.publisherLoad = true
			}
			
			this.getPublisherScen()
		}
	},
	methods: {
		async getPublisherScen() {
			this.loadingType = 'loading'
			let scenList = await Publisher.getPublisherDetails(this.lssuerid, this.pagenum)
			this.scenList = this.scenList.concat(scenList)
			console.log(scenList);
			if (scenList.length < 20) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
		},
		openIntro() {
			this.openIntroStatus = false
		},
		closeIntro() {
			this.openIntroStatus = true
		},
	},
	onReachBottom(e) {
		if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
		    return
		}
		this.pagenum = this.pagenum + 1
		this.getPublisherScen()
	},
}
</script>

<style lang="scss" scoped>
.publish-details{
	background-color: #FFFFFF;
}
.fixed {
	position: fixed;
	z-index: 99;
}
.publish-bg{
	width: 100%;
	height: 280rpx;
	overflow: hidden;
	.bg-img{
		width: 100%;
		height: 280rpx;
	}
}

.publish-info{
	position: relative;
	
	.attention{
		width: 230rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: #2EB9C3;
		color: #FFFFFF;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 30rpx;
		top: 40rpx;
	}
	.publish-title{
		padding-top: 100rpx;
		padding-left: 68rpx;
		font-weight: 700;
		font-size: 42rpx;
	}
	.intro-box{
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx 44rpx;
		background-color: #F7F9FF;
		color: #4F4F4F;
		font-weight: 400;
		font-size: 24rpx;
		line-height: 1.6;
		position: relative;
		.title{
			color: #000000;
			font-weight: 700;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		.open{
			color: #BABABA;
			font-size: 24rpx;
			text-decoration: underline;
			position: absolute;
			right: 44rpx;
			background-color:  #F7F9FF;
			bottom: 30rpx;
		}
		.close{
			color: #BABABA;
			font-size: 24rpx;
			text-decoration: underline;
			margin-left: 10rpx;
			display: inline-block;
		}
	}
}
.publish-logo{
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	position: absolute;
	left: 40rpx;
	top: -80rpx;
	z-index: 1;
	background-color: #F7F9FF;
	box-shadow: 1px 1px 9px #0D0408;
	display: flex;
	align-items: center;
	justify-content: center;
	.logo{
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}
}
.publish-list{
	padding-top: 10rpx;
	.title{
		color: #000000;
		font-weight: 700;
		font-size: 32rpx;
		padding-left: 31rpx;
	}
}
</style>
